// 封装的ajax请求函数
// 参数1: 请求url地址
// 参数2: 请求方式 默认值 是 get
// 参数3: 携带参数 默认值 是 空字符串
// 参数4: 请求结束 并且 请求成功 执行的 回调函数 默认值是 空函数
function myAjax( url , type = 'get' , data = '' , callback = function(){} ){
    // 创建 ajax对象 
    let xhr ;
    if( XMLHttpRequest ){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 判断 请求方式
    if( type.toLowerCase() === 'get' ){
        // get方式请求
        xhr.open( 'get' , `${url}?${data}` );
        xhr.send() ;

    }else{
        // post方式请求
        xhr.open( 'post' , url );
        xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    // 接收 请求结果
    xhr.onreadystatechange = function(){
        // ajax状态码是 4   http状态码是200-299
        // if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){
        
        if( xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
            // ajax请求结束 并且 请求成功
            // 调用回调函数 赋值的数据是 响应体结果
            // 也就是 xhr.response 中 存储的响应体结果数据
            callback( xhr.response );
        }
    }
}

// 封装一个promise程序执行 ajax请求
// 参数1    请求的url地址
// 参数2    请求的方式 
// 参数3    携带的参数怇
function myPromiseAjax( url , type = 'get' , data = '' ){
    // 创建一个 promise 对象 
    const p = new Promise(function( fulfilled , rejected ){
        // 执行异步ajax请求
        const xhr = new XMLHttpRequest() ;

        if( type.toLowerCase() === 'get' ){
            // get请求方式
            xhr.open( 'get' , `${url}?${data}` );
            xhr.send();

        }else{
            // post请求方式
            xhr.open( 'post' , url );
            xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

        // 接收 请求结果
        xhr.onreadystatechange = function(){  
            // 当 ajax状态码是 4 时 判断 http状态码          
            if( xhr.readyState === 4 ) {

                // 如果 http状态码 是 200 - 299 
                if( /^2\d{2}$/.test( xhr.status ) ){
                    // 请求成功
                    fulfilled( xhr.response );  

                }else if( /^(4|5)\d{2}$/.test( xhr.status )  ){
                    // 请求失败
                    rejected( xhr.statusText );

                }
            }
        }



        // xhr.onload = function(){
        //     // ajax状态码是 4   http状态码是200-299
        //     // if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){
            
        //     if( xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
        //         // ajax请求结束 并且 请求成功
        //         // 调用回调函数 赋值的数据是 响应体结果
        //         // 也就是 xhr.response 中 存储的响应体结果数据
        //         callback( xhr.response );
        //     }
        // }
    });

    // return 返回这个promise对象
    return p;
}

// 封装一个promise程序 执行 jQuery的ajax请求
function myPromiseJQueryAjax( url , type = 'get' , data = '' , dataType = 'text' ){
    // 创建一个 promise对象
    const p = new Promise(function( fulfilled , rejected ){

        // 调用 jQuery封装的aja函数
        $.ajax({
            url: url,
            type: type,
            data:  data,
            dataType: dataType,
            success: function( response ){
                fulfilled(response);
            },
            
            error: function( response ){
                rejected( response );
            },
        })
    })
    
    // return 返回这个 promise对象
    return p ;
}